<template>
    <el-dialog v-model="conf.show" :title="conf.title" :close-on-click-modal="false">
        <div class="row items-center" style="gap: 10px; margin-bottom: 15px">
            <el-select v-model="conf.name" class="m-2" placeholder="Select" @change="conf.open" style="width: 160px">
                <el-option v-for="item in SText.icon.names" :key="item" :label="item" :value="item" />
            </el-select>
            <el-input v-model="conf.findName" style="width: 120px" placeholder="查找" />
            <div>颜色：</div>
            <template v-for="(item, index) in conf.color">
                <input type="color" :class="['colorinput' + (index + 1)]" v-model="conf.color[index].value" />
            </template>
        </div>
        <el-scrollbar max-height="500px">
            <div class="row" v-if="conf.showIcon">
                <template v-for="el in SText.icon.list[conf.name]">
                    <div
                        class="iconlist column flex-center"
                        @click="conf.choose(el)"
                        :style="{
                            background:
                                el.type === conf.item.item.type && conf.name === conf.item.name ? '#c8ebff' : undefined
                        }"
                        v-if="conf.findName ? el.type.indexOf(conf.findName) != -1 : true"
                    >
                        <sicon :name="conf.name" :type="el.type" size="40" :color="iconColor" />
                        <div>{{ el.type }}</div>
                    </div>
                </template>
            </div>
        </el-scrollbar>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="conf.close">关闭</el-button>
                <el-button type="primary" @click="conf.closeItem">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { FileUtil } from 'tools-vue3'
import { computed, reactive, watch } from 'vue'
import SText from '~/store/SText'

const props = defineProps({
    show: { default: false }
})

watch(
    () => props.show,
    () => {
        conf.show = props.show
        if (conf.show) {
            conf.open()
        }
    }
)
const emit = defineEmits(['close', 'update:show'])

const conf = reactive({
    title: '选择图标',
    findName: '',
    color: [{ value: '#000000' }, { value: '#000000' }, { value: '#000000' }, { value: '#000000' }],
    name: SText.icon.names[0],
    item: {
        name: '',
        item: {} as any
    },
    show: false,
    showIcon: false,
    open: async () => {
        conf.showIcon = false
        const _name = conf.name
        if (SText.icon.list[_name]) {
            conf.showIcon = true
            return
        }
        SText.icon.list[_name] = []
        const _url = `${SText.icon.url}/${_name}/_all.json`
        let _list: any = await FileUtil.getFile(_url)
        if (typeof _list === 'string') {
            _list = JSON.parse(_list)
        }
        SText.icon.obj[_name] = _list
        const _keys = Object.keys(_list)
        for (let j = 0; j < _keys.length; j++) {
            let filestr: any = _list[_keys[j]]
            const objfill = () => {
                const _fill_l = Object.keys(filestr.fill).length
                filestr = {
                    fill: _fill_l
                }
            }
            if (typeof filestr === 'string') {
                if (filestr.startsWith('{')) {
                    filestr = JSON.parse(filestr)
                    objfill()
                } else {
                    filestr = {
                        fill: 1
                    }
                }
            } else {
                objfill()
            }

            SText.icon.list[_name].push({
                type: _keys[j],
                param: filestr
            })
        }
        conf.showIcon = true
    },
    choose: (item: any) => {
        conf.item.name = conf.name
        conf.item.item = item
    },
    close: () => {
        conf.show = false
    },
    closeItem: () => {
        console.log(conf.item)
        emit('close', conf.item)
        conf.close()
    }
})

const iconColor = computed(() => conf.color.map((_item) => _item.value))

watch(
    () => conf.show,
    () => {
        emit('update:show', conf.show)
    }
)
</script>
<style lang="less" scoped>
.iconlist {
    padding: 0px 5px;
    margin: 5px 0px;
    gap: 5px;
    cursor: pointer;
    height: 80px;
    width: 120px;
    font-size: 12px;

    &:hover {
        background: #f2f6fc;
    }
}
</style>
